<template>
  <div>
    <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('goBack')"></jxf-titletip>
    <div class="jxf-content mt20">
      <el-card class="jxf-table-card mt10">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="listArea">
          <jxf-datalist :info="dataInfo.basicInfo">
            <template slot="status" slot-scope="basicInfo">
              {{basicInfo.info.value == "0" ? "禁用" : "启用"}}
            </template>
          </jxf-datalist>
        </div>
      </el-card>
      <el-card class="jxf-table-card mt10">
        <div slot="header" class="clearfix">
          <span>资质信息</span>
        </div>
        <div class="listArea">
          <jxf-datalist :info="dataInfo.qualificationInfo">
            <template slot="qualification" slot-scope="qualificationInfo">
                <el-row class="qualificationInfo">
                  <viewer :images="qualificationInfo.info.value[0].business">
                    <span v-for="(item, index) in qualificationInfo.info.value[0].business" :key="index" class="qualification">
                      <img :src="item" />
                      <i>营业执照</i>
                    </span>
                  </viewer>
                  <viewer :images="qualificationInfo.info.value[0].Identity">
                    <span v-for="(item, index) in qualificationInfo.info.value[0].Identity" :key="index" class="qualification">
                      <img :src="item" />
                      <i v-if="index === 0">身份证正面</i>
                      <i v-else>身份证反面</i>
                    </span>
                  </viewer>
                  <viewer :images="qualificationInfo.info.value[0].legal">
                    <span v-for="(item, index) in qualificationInfo.info.value[0].legal" :key="index" class="qualification">
                      <img :src="item" />
                      <i>其他证件</i>
                    </span>
                  </viewer>
                </el-row>
            </template>
          </jxf-datalist>
        </div>
      </el-card>
      <el-card class="jxf-table-card mt10">
        <div slot="header" class="clearfix">
          <span>补充信息</span>
        </div>
        <div class="listArea">
          <jxf-datalist :info="dataInfo.additionalInfo">
            <template slot="idCard" slot-scope="additionalInfo">
              {{additionalInfo.info.value ? additionalInfo.info.value.substring(0, 3) + '****' + additionalInfo.info.value.substring(additionalInfo.info.value.length - 4, additionalInfo.info.value.length) : ""}}
            </template>
            <template slot="cardNo" slot-scope="additionalInfo">
              {{additionalInfo.info.value ? additionalInfo.info.value.substring(0, 3) + '****' + additionalInfo.info.value.substring(additionalInfo.info.value.length - 4, additionalInfo.info.value.length) : ""}}
            </template>
          </jxf-datalist>
        </div>
      </el-card>
      <div class="btn-area">
        <!--<el-button type="primary" @click="resetPassword(dataInfo.id)">重置密码</el-button>-->
        <el-button type="danger" @click="freeze(dataInfo.id)" v-if="dataInfo.status === 1">禁用</el-button>
        <el-button type="danger" @click="unFreeze(dataInfo.id)" v-if="dataInfo.status === 0">启用</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ChannelDetail",
        components: {},
        props: {
          dataInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            title: "渠道商详情"
          }
        },
        methods: {
          closeModel() {
            this.$emit('goBack')
          },
          // 冻结
          freeze(id) {
            let data = {
              userId: id,
              status: 0
            }
            this.$confirm('此操作将禁用该账户, 是否继续?', '', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajax.post(apis.architecture.changeUserStatus, data).then(res => {
                if(res.code == '10000000') {
                  this.$message({
                    type: 'success',
                    message: '禁用成功!'
                  });
                  this.$emit('fresh')
                  this.closeModel()
                } else {
                  this.$message.error(res.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },
          unFreeze(id) {
            let data = {
              userId: id,
              status: 1
            }
            this.$confirm('此操作将启用该账户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajax.post(apis.architecture.changeUserStatus, data).then(res => {
                if(res.code == '10000000') {
                  this.$message({
                    type: 'success',
                    message: '启用成功!'
                  });
                  this.$emit('fresh')
                  this.closeModel()
                } else {
                  this.$message.error(res.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          },
        },
        watch: {

        }
    }
</script>

<style lang="scss" scoped>

</style>
